import image1 from '../assets/images/1.jpg' // 加载图片
import image2 from '../assets/images/2.jpg'
import image3 from '../assets/images/3.jpg'
import image4 from '../assets/images/4.jpg'
import image5 from '../assets/images/5.jpg'
import image6 from '../assets/images/6.jpg'
import image7 from '../assets/images/7.jpg'
import { name, description } from '../../package.json' // 加载json

class DomCreate {
  /**
     * 构造函数
     * @param {*} el
     */
  constructor (el = 'app') {
    this.$el = document.getElementById(el)
  }

  /**
     * 渲染dom
     */
  renderer () {
    const dom = document.createElement('div')
    dom.innerHTML = this.template()
    this.$el.appendChild(dom) // 插入dom
  }

  /**
     * 字符模板
     */
  template () {
    const images = [image1, image2, image3, image4, image5, image6, image7]
    return `
                <div class="container">
                    <div class="jumbotron" style="background:#222323;">
                        <h1>${name}</h1>
                        <p>${description}</p>
                        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
                    </div>
                    <ul class="list-group">
                        ${images.map(src => `<li class="list-group-item"><img src="${src}" /></li>`).join('')}
                    </ul>
                </div>
        `
  }
}

export default DomCreate
